#include('../header.html', {title: '我的考试'})
<style>
  .btn-primary,.btn-primary.active,.btn-primary.focus,.btn-primary:focus,.btn-primary:hover{background-color: #337ab7;border-color: #2e6da4;}
</style>
<div id="content-container" class="container">
  <div class="row row-3-9 my-layout">
    <div class="col-md-3">
      #include('sideMenu.html', {user: '', name: '我的考试'})
    </div>
    <div id="uexam-content" class="col-md-9">
      <div class="panel panel-default panel-col">
        <div class="panel-heading">我的考试</div>
        <div class="panel-body">
          <div class="">
            <table class="table table-striped" style="word-break: break-all;">
              <thead>
              <tr>
                <th>试卷名称</th>
                <th>参与时间</th>
                <th>结束时间</th>
                <th>答案(U/D)</th>
                <th>所得分数</th>
              </tr>
              </thead>
              <tbody>
                <tr v-if="joinPapers.length<=0">
                  <td colspan="5"><div class="cd-empty">未参加任何考试</div></td>
                </tr>
                <tr is="join-tr" v-for="(join, index) in joinPapers"
                    :join="join" :index="index"></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <input id="e-upload" type="file" accept=".doc,.docx,.txt" class="hide">
</div>
<template id="join-tr">
  <tr>
    <td><a :href="'/course/'+join.courseId+'/join/info'" target="_blank">{{join.testpaper.name}}</a></td>
    <td>{{join.time.substr(0, 16)}}</td>
    <td>{{join.testpaper.endTime}}</td>
    <td>
      <button @click="upload_" v-if="status==1" class="btn btn-xs btn-info" title="上传答卷">上传</button>
      <button v-if="status==2" @click="upload_" class="btn btn-xs btn-success" title="重新上传答卷">更新</button>
      <button v-if="status==3" @click="down_(join.testpaper.result, '答案')"
              class="btn btn-xs btn-primary" title="下载试卷答案">下载</button>
      <button @click="down_(join.result, '个人作答')" class="btn btn-xs btn-warning" title="下载我的答卷">查看</button>
    </td>
    <td>{{join.score}}</td>
  </tr>
</template>
<script type="text/javascript">
   var examVm = new Vue({
     el: '#uexam-content',
     data: {
       joinPapers: [],
       page: {
         pageNum: 1,
         totalPages: 1
       }
     },
     methods: {
       getPages: function () {
         var self = this;
         $.post('/course/join_paper/u/page', {page: this.page.pageNum}, function (data) {
           if (data.success) {
             self.joinPapers = data.payload.rows;
             self.page.pageNum = data.payload.pageNum;
             self.page.totalPages = data.payload.totalPages;
           }
         })
       }
     },
     components: {
       'join-tr': {
         props: ['join', 'index'],
         template: '#join-tr',
         computed: {
           status: function () {
             if (!isEmpty(this.join.testpaper.result) || this.join.score>0) {
               return 3; //下载答案
             } else if (!isEmpty(this.join.result)) {
               return 2; //更新上传的答案
             } else {
               return 1; //上传答案
             }
           }
         },
         methods: {
           down_: function(path, t) {
             if (!isEmpty(path)) {
               window.open(path+"&name="+this.join.testpaper.name+"("+t+")", '_top');
             } else {
               layer.msg('资源还没准备好，请耐心等待...', {time: 1200});
             }
           },
           upload_: function () {
             var self = this;
             var inp = $('#e-upload')[0];
             inp.onchange = function (e) {
               var file = inp.files[0];
               var fd = new FormData();
               fd.append('kid', self.join.courseId);
               fd.append('pid', self.join.testPaperId);
               fd.append('type', 'test_user_result');
               fd.append('path', self.join.testpaper.folder);
               fd.append('file', file);
               var xhr = new XMLHttpRequest();
               xhr.open('post', '/file/upload', true);
               xhr.onload = function () {
                 var data = JSON.parse(xhr.responseText);
                 if (data.success) {
                   self.submit_(data.payload.path);
                 } 
                 inp.value = '';
               };
               xhr.send(fd);
             };
             inp.click();
           },
           submit_: function (result) {
             var self = this;
             $.post('/course/join_paper/'+this.join.courseId+'/submit/'+this.join.id,
                 {result: result, folder: self.join.testpaper.folder}, function (data) {
               if (data.success) {
                 layer.msg('答案提交成功！', {time: 1200});
                 self.join.result = data.payload.result;
               }
             })
           }
         }
       }
     },
     created: function () {
       this.getPages();
     }
   });

   function isEmpty(val) {
     return val == null || val.trim() === '';
   }
</script>
#include('../footer.html')